<template>
	<view class="page-serve-wrapper">
		<view class="page-serve">
			<view class="serve-header">

			</view>
			<view class="serve-content">
				<view class="serve-list">
					<view class="serve-item" @tap="go(`detail?id=${item.id}`)"  v-for="(item,index) in DataList" :key="index">
						<view class="serve-master">
							<image :src="$BASE_URL+item.service_banner"></image>
							<view class="master-tit">
								<text>{{item.service_name}}</text>
							</view>
						</view>
						<view class="serve-biaoqian">
							<view class="serve-tags s-flex-wrap">
								<view class="tag-item" v-for="(item1,index1) in item.service_tags" :key="index1">{{item1}}</view>
							</view>
						</view>
						<view class="serve-other flex-between">
							<view class="serve-other-star">
								<text>推荐指数</text>
								<up-rate :count="5" v-model="item.service_score" active-color="#FF7139"
									inactive-color="#b2b2b2" readonly></up-rate>
							</view>
							<view class="serve-other-link">
								<text>点击进入</text>
								<image src="../../static/img/serve/more.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script setup name='serve'>
	import {
		ref,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	const count = ref(5)
	const value = ref(3)
	const params = ref({
		page: 1,
		limit: 10
	})
	const DataList = ref([])
	getListData()
	
	function getListData() {
		proxy.$request({
			url: 'api/Service/getServiceLists',
			header: "application/x-www-form-urlencoded",
			data: {
				lang: 1,
				page: params.value.page,
				limit: params.value.limit,
			}
		}).then(res => {
			if (res.code == 0) {
				return proxy.$toast(res.msg)
			} else {
				DataList.value = res.data
			}
		})
	}
</script>

<style lang="scss" scoped>
	.page-serve-wrapper {
		padding: 0 32rpx 30rpx;

		.flex-between {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.serve-content {
			.serve-list {
				.serve-item {
					.serve-master {
						position: relative;

						image {
							width: 100%;
							height: 304rpx;
						}

						.master-tit {
							position: absolute;
							left: 0;
							right: 0;
							width: 100%;
							text-align: center;
							top: 0;
							height: 304rpx;
							line-height: 304rpx;

						}

						text {
							font-size: 36rpx;
							font-weight: bold;
							color: #fff
						}

					}

					.serve-detail-info {
						padding: 20rpx;

						.detail-info-list {
							text {
								display: block;
								margin: 8rpx 0;
							}

							.detail-val {
								color: #333;
								font-size: 28rpx;
							}

							.detail-label {
								font-size: 26rpx;
								color: #999
							}
						}

					}

					.serve-biaoqian {
						.serve-tags {
							display: flex;
							justify-content: flex-start;
							align-items: center;
							margin: 20rpx 0;

							.tag-item {
								width: 152rpx;
								height: 60rpx;
								line-height: 60rpx;
								border-radius: 16rpx;
								text-align: center;
								color: #FF9839;
								background: #FFF6EE;
								font-size: 24rpx;
								margin-left: 12rpx;
								margin-bottom: 14rpx;
							}
						}
					}

					.serve-other {
						font-size: 24rpx;
						margin-bottom: 24rpx;
						padding: 0 12rpx;
						// height: 32rpx;
						// line-height: 32rpx;

						.serve-other-star {
							display: flex;
							justify-content: flex-start;
							align-items: center;
							color: #333;

							image {
								position: relative;

								width: 32rpx;
								height: 32rpx;
								top: 6rpx;
								left: 6rpx;
								margin-left: 10rpx;
							}


						}

						.serve-other-link {
							color: #999;

							image {
								width: 28rpx;
								height: 28rpx;
								position: relative;
								top: 6rpx;
							}
						}
					}
				}
			}
		}
	}
</style>